﻿@model DHQGHN.PM2.Models.Online.ThongTinCaNhanModel
<style>
    .ui-tooltip, .arrow:after {
        background: #FAFAD2;
    }

    .ui-tooltip {
        color: black;
        font-size: 12px;
    }

    .arrow {
        width: 70px;
        height: 16px;
        overflow: hidden;
        position: absolute;
        left: 50%;
        margin-left: -35px;
        bottom: -16px;
    }

        .arrow.top {
            top: -16px;
            bottom: auto;
        }

        .arrow.left {
            left: 20%;
        }

        .arrow:after {
            content: "";
            position: absolute;
            left: 20px;
            top: -20px;
            width: 25px;
            height: 25px;
            box-shadow: 6px 5px 9px -9px black;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .arrow.top:after {
            bottom: -20px;
            top: auto;
        }
</style>

<script>
    @functions{
        public string GetAntiForgeryToken()
        {
            string cookieToken, formToken;
            AntiForgery.GetTokens(null, out cookieToken, out formToken);
            return cookieToken + "," + formToken;
        }
    }
    jQuery(function ($) {
        Tooltip();
        var code = $("#CODE").val();
        var tinh = $("#CODE").val().substring(0, 2);
        var huyen = $("#CODE").val().substring(0, 5);
        if (code != "") {
            $("#TINHAD").val(tinh);
        }
        else {
            $("#divLoading").hide();
            $("#btnNext").removeAttr("disabled");
            $("#btnBack").removeAttr("disabled");
        }
        if ($("#TINHAD").val() != "-1") {
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAdministrativeUnit1")', // we are calling json method
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',

                data: {
                    code: $("#TINHAD").val(),
                    level: '2'
                },
                success: function (states) {
                    $("#HUYENAD").append('<option value="' + '-1' + '">' +
               '-- Chọn Huyện --' + '</option>');
                    $.each(states, function (i, state) {
                        $("#HUYENAD").append('<option value="' + state.Value + '">' +
                             state.Text + '</option>');
                    });

                },
                complete: function () {
                    $("#HUYENAD").val(huyen);
                    $("#XAAD").empty();
                    $("#XAAD").append('<option value="' + '-1' + '">' +
                        '-- Chọn Xã --' + '</option>');
                    $.ajax({
                        type: 'POST',
                        url: '@Url.Action("GetAdministrativeUnit1")', // we are calling json method
                        headers: {
                            'VerificationToken': '@GetAntiForgeryToken()'
                        },
                        dataType: 'json',

                        data: {
                            code: $("#HUYENAD").val(),
                            level: '3'
                        },

                        success: function (states) {

                            $.each(states, function (i, state) {
                                $("#XAAD").append('<option value="' + state.Value + '">' +
                                    state.Text + '</option>');

                            });

                        },
                        complete: function () {
                            $("#XAAD").val(code);
                            $("#divLoading").hide();
                            $("#btnNext").removeAttr("disabled");
                            $("#btnBack").removeAttr("disabled");
                        },
                        error: function (ex) {
                            alert('Failed to retrieve states.' + ex);
                        }
                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
        }
        else {
            $("#HUYENAD").append('<option value="' + '-1' + '">' +
               '-- Chọn Huyện --' + '</option>');
            $("#XAAD").append('<option value="' + '-1' + '">' +
                 '-- Chọn Xã --' + '</option>');
        }
        $("#TINHAD").change(function () {
            $("#divLoading").show();
            $("#HUYENAD").empty();
            $("#XAAD").empty();
            $("#HUYENAD").append('<option value="' + '-1' + '">' +
                 '-- Chọn Huyện --' + '</option>');
            $("#XAAD").append('<option value="' + '-1' + '">' +
                 '-- Chọn Xã --' + '</option>');
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAdministrativeUnit1")',
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',

                data: {
                    code: $("#TINHAD").val(),
                    level: '2'
                },
                success: function (states) {
                    $.each(states, function (i, state) {
                        $("#HUYENAD").append('<option value="' + state.Value + '">' +
                             state.Text + '</option>');
                    });

                },
                complete: function (states) {
                    $("#divLoading").hide();
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
            return false;
        })
        $("#HUYENAD").change(function () {
            $("#divLoading").show();
            $("#XAAD").empty();
            $("#XAAD").append('<option value="' + '-1' + '">' +
                '-- Chọn Xã --' + '</option>');
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetAdministrativeUnit1")',
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                dataType: 'json',

                data: {
                    code: $("#HUYENAD").val(),
                    level: '3'
                },
                success: function (states) {
                    $.each(states, function (i, state) {
                        $("#XAAD").append('<option value="' + state.Value + '">' +
                             state.Text + '</option>');
                    });

                },
                complete: function () {
                    $("#divLoading").hide();
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
            return false;
        });
    });
    function ClickButton(Next) {
        $("#divLoading").show();
        kq = $("#XAAD").val();
        if (kq == "-1") {
            kq = "";
        }
        var dataSend = {
            'RESIDENT_ID':$('#selectMenu').val(),
            'ADD_DETAILS': $("#ADD_DETAILS").val(),
            'ADD_ADM_UNIT_ID': kq,
            'NEXT': Next,

        };
        var jqXHR = $.ajax({
            url: '@Url.Action("UpdateThongtincanhanNew", "Online")',
            dataType: 'html',
            cache: false,
            method: 'post',
            headers: {
                'VerificationToken': '@GetAntiForgeryToken()'
            },
            data: dataSend,
            success: function myfunctionSuccess(data, textStatus, jqXHR) {
                if(Next!='2'){
                $('.mnResident #mainForm').unMask();
                $('#mainForm').html(data);
                } else {
                    window.location.href = '@Url.Action("Login","Online")';
                }
            },
            complete: function (jqXHR, textStatus) {
                $('#thongtin').text("THÔNG TIN KHAI SINH");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('Có lỗi xảy ra trong quá trình lưu thông tin: ' + errorThrown);
            },
        });
    }
    $("#btnNext").click(function (event, giatri) {
        if (checkhtml()) {
            alert("Dữ liệu nhập không được có ký tự '<' ở đầu.");
        } else {
            if (giatri != null) {
                ClickButton(giatri);
            }
            else {
                $('.mnResident #mainForm').setMask("Đang thực hiện...");
                ClickButton(1);
            }
        }

    });

</script>

<div class="row margin-top-20">
    <div class="col-md-12">
        <div class="form-group">
            <label class="control-lable col-md-3 col-sm-12 col-xs-12">Nơi ở hiện tại</label>
            <div class="col-md-9 col-sm-12 col-xs-12">
                @Html.TextBoxFor(m => m.ADD_DETAILS, new { @class = "form-control form-control input-sm", placeholder = "Nơi ở hiện tại", MaxLength = 255, @title = @Html.ToolTipMessageFor(m => m.ADD_DETAILS) })
            </div>
        </div>
        <div class="form-group">
            <label class="control-lable col-md-3 col-sm-12 col-xs-12">ĐVHC Nơi ở hiện tại</label>
            <div class="col-md-3 col-sm-12 col-xs-12">
                @Html.DropDownList("TINHAD", ViewData["DISTRICT_CODE"] as List<SelectListItem>, new { @class = "form-control", @title = @Html.ToolTipMessageFor(m => m.TINHAD) })
            </div>
            <div class="col-md-3 col-sm-12 col-xs-12">
                @Html.DropDownList("HUYENAD", new SelectList(string.Empty, "Value", "Text"), new { @class = "form-control", @title = @Html.ToolTipMessageFor(m => m.HUYENAD) })
            </div>
            <div class="col-md-3 col-sm-12 col-xs-12">
                @Html.DropDownList("XAAD", new SelectList(string.Empty, "Value", "Text"), new { @class = "form-control", @title = @Html.ToolTipMessageFor(m => m.XAAD) })
            </div>
        </div>
    </div>
    <div>@Html.HiddenFor(model => model.CODE)</div>
    <div style="text-align:center; margin-top:30px;">
        <button class="btn btn-sm" id="btnNext" style="background-color: #2664B7; color:#ffffff; min-width:100px;">Tiếp tục <i class="fa fa-angle-double-right"></i></button>
    </div>
</div>